import { EyeInvisibleOutlined, LockOutlined } from '@ant-design/icons'
import { Input, message, Button, Space } from 'antd'
import classNames from 'classnames'
import React, { ChangeEvent, useState } from 'react'
import { useDispatch } from 'react-redux'
import SortableContainer from '../../../components/DragSortable/SortableContainer'
import SortableItem from '../../../components/DragSortable/SortableItem'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
import {
  changeSelectedId,
  changeComponentTitle,
  toggleComponentLocked,
  changComponentHidden,
  moveComponent,
} from '../../../store/componentsReducer'

import styles from './Layers.module.scss'

const Layers: React.FC = () => {
  const { componentList, selectedId } = useGetComponentInfo()
  const dispatch = useDispatch()
  // 记录正在修改标题的组件
  const [changingTitleId, setChangingTitleId] = useState('')

  // 点击选中组件
  function handleTitleClick(id: string) {
    const currentComponent = componentList.find(c => c.fe_id === id)
    if (currentComponent && currentComponent.isHidden) {
      return message.info('不能选中隐藏的组件')
    }
    if (id !== selectedId) {
      // 当前组件未被选中, 执行选中
      dispatch(changeSelectedId(id))
      setChangingTitleId('')
      return
    }

    // 点击修改标题
    setChangingTitleId(id)
  }

  function handleChangeTitle(e: ChangeEvent<HTMLInputElement>) {
    const newTitle = e.target.value.trim()
    if (!newTitle) return
    if (!selectedId) return
    dispatch(changeComponentTitle({ fe_id: selectedId, title: newTitle }))
  }

  // 切换隐藏/显示
  function handleChangeHidden(id: string, isHidden: boolean) {
    dispatch(changComponentHidden({ fe_id: id, isHidden }))
  }

  // 切换锁定/解锁
  function handleChangeLock(id: string) {
    dispatch(toggleComponentLocked({ fe_id: id }))
  }

  // const componentListWithId = componentList.map(c => ({ ...c, id: c.fe_id }))
  function handleDragEnd(oldIdx: number, newIdx: number) {
    // console.log(oldIdx, newIdx)
    dispatch(moveComponent({ oldIdx, newIdx }))
  }

  return (
    <SortableContainer
      items={
        componentList.map(c => ({ ...c, id: c.fe_id }))
        // componentListWithId
      }
      onDragEnd={handleDragEnd}
    >
      {componentList.map(({ fe_id, title, isHidden, isLocked }) => {
        // 拼接 title className
        const titleDefaultClassName = styles.title
        const selectedClassName = styles.selected
        const titleClassName = classNames({
          [titleDefaultClassName]: true,
          [selectedClassName]: fe_id === selectedId,
        })

        return (
          <SortableItem key={fe_id} id={fe_id}>
            <div className={styles.wrapper}>
              <div className={titleClassName} onClick={() => handleTitleClick(fe_id)}>
                {fe_id !== changingTitleId && title}
                {fe_id === changingTitleId && (
                  <Input
                    value={title}
                    onPressEnter={() => setChangingTitleId('')}
                    onBlur={() => setChangingTitleId('')}
                    onChange={handleChangeTitle}
                  />
                )}
              </div>
              <div className={styles.handler}>
                <Space>
                  <Button
                    size="small"
                    shape="circle"
                    className={!isHidden ? styles.btn : ''}
                    icon={<EyeInvisibleOutlined />}
                    type={isHidden ? 'primary' : 'text'}
                    onClick={() => {
                      handleChangeHidden(fe_id, !isHidden)
                    }}
                  />
                  <Button
                    size="small"
                    shape="circle"
                    className={!isLocked ? styles.btn : ''}
                    icon={<LockOutlined />}
                    type={isLocked ? 'primary' : 'text'}
                    onClick={() => {
                      handleChangeLock(fe_id)
                    }}
                  />
                </Space>
              </div>
            </div>
          </SortableItem>
        )
      })}
    </SortableContainer>
  )
}

export default Layers
